import React, { Component } from "react";
import { View, Text, Image, StyleSheet, ImageBackground,Modal, TouchableWithoutFeedback } from "react-native";
import Picker from 'react-native-picker';
import CustomerHeader from "../../widget/customerHeader";
import * as RootNavigation from '../../../App'
import NetUtil from "../../net/net_util";
import Loading from "../../widget/Loading";
import Toast from "../../widget/Toast";

const Cell=({title,bottomLine, content,contentColor,callBack})=>{
  return (
    <TouchableWithoutFeedback onPress={callBack}>
      <View style={styles.cell}>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.right}>
          <Text style={[styles.content,{color:contentColor?contentColor:'#717171'}]}>{content?content:''}</Text>
          <Image style={{width:6,height:12}} source={require('../../img/arrow_right_icon.png')}></Image>
        </View>
        {bottomLine?<View style={styles.bottomLine}></View>:null}
      </View>
    </TouchableWithoutFeedback>
  )
}

export default class ModifyInfo extends Component{
  constructor(props) {
    super(props);
    this.state={
      showModal:false,
      userInfo:{},
      industryList:[]
    }
  }

  componentDidMount() {
    this.getUserInfo()
    this.getIndustyList()
  }

  goToPage(page,data){
    if(page=='gender'||page=='industry'){
      let data=[]
      if(page=='gender'){
        data=['男','女']
      }
      else if(page=='industry'){
        this.state.industryList.forEach((item)=>{
          data.push(item.name)
        })
      }
      Picker.init({
        pickerData:data ,
        pickerConfirmBtnText:'确定',
        pickerCancelBtnText:'取消',
        pickerTitleText:'选择性别',
        pickerConfirmBtnColor:[227,147,84,1],
        pickerCancelBtnColor:[51,51,51,1],
        pickerToolBarBg:[255,255,255,1],
        pickerBg:[255,255,255,1],
        selectedValue: [data[0]],
        onPickerConfirm: data => {
          console.log(data);
          if(page=='gender'){
            let gender=data[0]=='男'?1:2
            this.updateUserInfo({gender:gender})
          }
          else {
            let obj=this.state.industryList.find((item)=>{
              return item.name==data[0]
            })
            this.updateUserInfo({industryId:obj.id})
          }
          this.setState({showModal:false})

        },
        onPickerCancel: data => {
          console.log(data);
          this.setState({showModal:false})
        },
        onPickerSelect: data => {
          console.log(data);
        }
      });
      Picker.show();
      this.setState({showModal:true})
    }
    else if(page){
      RootNavigation.navigate(page,Object.assign({
        refresh:()=>{
          this.getUserInfo()
        }
      },data))
    }
    else{

    }
  }

  /*获取会员详情*/
  getUserInfo(){
    NetUtil.get('member/member/detail',{},(res)=>{
      console.log(res)
      if(res.code==200){
        this.setState({userInfo:res.data})
      }
    })
  }

  /*修改会员信息*/
  updateUserInfo(data){
    Loading.show()
    NetUtil.postJson('member/member/modify',data,(res)=>{
      Loading.hide()
      if(res.code==200){
        Toast.add('修改成功')
        this.getUserInfo()
      }
      else {
        Toast.add(res.msg)
      }
    })
  }

  /**获取行业列表*/
  getIndustyList(){
    NetUtil.get('member/member/industry',{},(res)=>{
      this.setState({industryList:res.data})
      console.log(res)
    })
  }

  render() {
    return (
      <View style={{flex:1,backgroundColor:'#fff'}}>
        <CustomerHeader title={'编辑个人信息'} leftOnPress={()=>{this.props.navigation.pop()}}></CustomerHeader>
        <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
          <ImageBackground style={styles.header} source={{uri:'https://cdn.uviewui.com/uview/swiper/swiper2.png'}}>
            <View style={styles.portraitBox}>
              <Image style={{width:'100%',height:'100%'}} source={{uri:this.state.userInfo.avatar}}></Image>
              <View style={styles.exchange}>
                <Text style={styles.exchangeTitle}>更换</Text>
              </View>
            </View>
            <View style={styles.coverBox}>
              <Text style={styles.coverTitle}>更换封面</Text>
            </View>
          </ImageBackground>
          <View>
           <Cell title={'昵称'} bottomLine={true} content={this.state.userInfo.nickName} callBack={()=>{this.goToPage('ModifyItemInfo',{title:'修改昵称',key:'nickName',value:this.state.userInfo.nickName})}}></Cell>
            <Cell title={'签名'} content={this.state.userInfo.motto} callBack={()=>{this.goToPage('ModifyItemInfo',{title:'修改签名',key:'motto',value:this.state.userInfo.motto})}}></Cell>
          </View>
          <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
          <View>
            <Cell title={'性别'} bottomLine={true} content={this.state.userInfo.gender==1?'男':(this.state.userInfo.gender==2?'女':'未知')} callBack={()=>{this.goToPage('gender')}}></Cell>
            <Cell title={'生日'} bottomLine={true} content={this.state.userInfo.birthday}></Cell>
            <Cell title={'所在地'} content={this.state.userInfo.location}></Cell>
          </View>
          <View style={{height:10,backgroundColor:'#F6F6F6'}}></View>
          <View>
            <Cell title={'行业'} content={this.state.userInfo.industryName} callBack={()=>{this.goToPage('industry',)}}></Cell>
          </View>
        </View>
        {this.state.showModal?<View style={styles.mask}></View>:null}
        <Loading></Loading>
        <Toast></Toast>
        {/*<Modal visible={this.state.showModal} transparent={true}></Modal>*/}
      </View>
    )
  }
}

const styles=StyleSheet.create({
  portraitBox:{
    width:64,
    height:64,
    borderRadius:32,
    borderWidth:2,
    borderColor:'#fff',
    borderStyle:'solid',
    overflow:'hidden'
  },
  header:{
    height:140,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  exchange:{
    position:'absolute',
    backgroundColor:'rgba(0,0,0,0.5)',
    height: 23,
    width: 64,
    bottom:0,
    left:0,
    right:0
  },
  exchangeTitle:{
    color:'#fff',
    textAlign:'center',
    fontSize:12,
    lineHeight:23
  },
  coverBox:{
    position: 'absolute',
    right: 14,
    bottom: 13,
    width:65,
    height:24,
    borderRadius:12,
    backgroundColor: 'rgba(255,255,255,0.4)'
  },
  coverTitle:{
    fontSize:11,
    color: '#fff',
    flex:1,
    lineHeight:24,
    textAlign: 'center'
  },

  cell:{
    backgroundColor:'#fff',
    height:50,
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    paddingHorizontal:15
  },
  title:{
    color:'#111111',
    fontSize:15
  },
  right:{
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  content:{
    color:'#717171',
    fontSize:14,
    marginRight:12
  },
  bottomLine:{
    position:'absolute',
    left:15,
    right:15,
    bottom:0,
    height: 1,
    backgroundColor: '#F6F6F6'
  },
  mask:{
    position:'absolute',
    left:0,
    right:0,
    top:0,
    bottom:0,
    backgroundColor:'rgba(0,0,0,0.5)'
  }
})
